<template>
	<view>
		<!-- 轮播图区域 -->
		<view class="box">
			<swiper @change="bannerChange">
				<swiper-item>
					<image mode="widthFix" src="../../static/detail_1.png"></image>
				</swiper-item>
				<swiper-item>
					<image mode="widthFix" src="../../static/detail_2.png"></image>
				</swiper-item>
				<swiper-item>
					<image mode="widthFix" src="../../static/detail_3.png"></image>
				</swiper-item>
				<swiper-item>
					<image mode="widthFix" src="../../static/detail_4.png"></image>
				</swiper-item>
			</swiper>
			<view class="active">{{num}}/4</view>
		</view>
		<!-- 商品信息 -->
		<view>
			<view class="price">
				<text>￥</text>
				480000.00
			</view>
			<view class="title">
				【事业部礼包】口服液*1800盒另赠体验礼包*2100个（4200瓶）
			</view>
			<view class="desc">
				<view>原价：￥0.00</view>
				<view>库存：96400盒</view>
				<view>销量：3600盒</view>
			</view>
		</view>
		<!-- 灰条 -->
		<view class="line"></view>
		<!-- 运费 -->
		<view class="yunfei">
			<text>运费：</text>【到付】以小哥实际结算费用为准
		</view>
		<view class="line"></view>
		<view class="yunfei flex">
			<view><text>已选择：</text>1800</view>
			<view><van-icon name="arrow" /></view>
		</view>
		<!-- 产品介绍 -->
		<view class="descr">
			<view class="desc-title">产品介绍</view>
			<view>
				具体的详细介绍内容
			</view>
		</view>
		<van-goods-action>
		  <van-goods-action-icon icon="chat-o" text="客服"  />
		  <van-goods-action-icon icon="cart-o" text="购物车"  />
		  <van-goods-action-button
		    text="加入购物车"
		    type="warning"
		  />
		  <van-goods-action-button text="立即购买"  />
		</van-goods-action>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: 1
			}
		},
		onLoad(query) {  //  路径上携带的参数
			// console.log(a)
			console.log(query.id)
		},
		methods: {
			bannerChange (e){ // 事件对象  js
				this.num = e.detail.current + 1
			}
		}
	}
</script>

<style>
	.desc-title{
		font-size: 18px;
		text-align: center;
		padding-top: 30px;
		padding-bottom: 30px;
	}
	.descr{
		background: #f5f5f5;
		padding-bottom: 50px;  /*方便空出导航*/
	}
	.flex{
		display: flex;
		justify-content: space-between;
	}
.yunfei{
	margin: 10px 15px;  /*上下 左右*/
}
.yunfei text{
	color: #999;
}
.line{
	height: 10px;
	background: #f5f5f5;
}
.box{
	position: relative;
}
.active{
	position: absolute;
	bottom: 20px;
	left: 20px;
	background: #fff;
	color: #000;
	font-size: 12px;
	padding: 2px 4px;
}
swiper{
	height: 380px;
}
swiper image{
	width: 100%;
}
.price{
	color: #ff2100;
	margin: 10px 15px;  /*上下 左右*/
	font-size: 22px;
}
.price text{
	font-size: 12px;
}
.title{
	margin: 10px 15px;  /*上下 左右*/
	font-size: 18px;
	font-weight: 600;
	text-align: justify; /* 两端对齐*/
}
.desc{
	margin: 10px 15px;  /*上下 左右*/
	display: flex;
	font-size: 13px;
	color: #666;
	justify-content: space-between;
}
</style>
